<template>
  <view class="whs-info">
    <viwe class="whs-domain">
      <!-- <view class="whs-desc">域名:</view> -->
      <uni-easyinput
        ref="domain"
        class="uni-mt-5"
        trim="all"
        :clearable="false"
        v-model="domain"
        placeholder="请输入查询的域名"
      />
      <van-button type="primary" size="small" @click="getWhoisInfo"
        >点击查询</van-button
      >
    </viwe>
    <uni-card v-if="WHSInfo" padding="20rpx 0" :thumbnail="avatar">
      <view> 您查询域名的WHOIS信息为： </view>
      <block v-for="(item, index) in WHSInfo" :key="index">
        <view class="whs-info-item" v-if="WHSInfo.length">
          {{ item.key }}：{{ item.value }}
        </view>
      </block>
      <view class="whs-info-item" v-if="!WHSInfo.length"
        >您输入的域名暂未注册。</view
      >
    </uni-card>
  </view>
</template>

<script>
import mixin from "@/mixins/mixins.js";
export default {
  name: 'Whios',
  mixins: [mixin],
  data() {
    return {
      domain: '', // 绑定输入框
      WHSInfo: null // 数据信息
    }
  },
  methods: {
    async getWhoisInfo() {
      // 此项api因未备案，无法添加request合法域名 预览此接口不管用
      const res = await this.$http.get(
        `https://api.vore.top/api/whois?domain=${this.domain}`
      )
      // console.log(res,'222')
      // 处理域名少写一位
      // if (res?.data?.list?.zh instanceof Array) {
      //   console.log(res.data.info,'array')
      //   this.$msg(res.data.info)
      // }
      //
      // 域名后缀只输入一个字母
      if (typeof res === 'string') {
        // console.log(res,'string')
        this.$refs.domain.focus = true
        return this.$msg('查询失败，非合法域名。')
      }
      // 查询成功
      if (res.code === 200) {
        // console.log(res,'200')
        const zh = res.data.list.zh
        const k = [] // 存键的数组
        const val = [] // 存值的数组
        for (const key in zh) {
          val.push(zh[key])
          k.push({ key })
        }
        // 遍历数组将值合并到键里并形成新数组
        k.map((item, index) => {
          return (item.value = val[index])
        })
        // console.log(k,val)
        this.WHSInfo = k
      } else {
        // 查询失败的情况
        this.$refs.domain.focus = true
        this.$msg(res.data.info)
      }
    },

  }
}
</script>

<style lang="scss" scoped>
::v-deep .van-button {
  margin: 6rpx 10rpx;
}
.whs-info {
  .whs-domain {
    display: flex;
    margin-top: 20rpx;
    // .whs-desc {
    //   line-height: 68rpx;
    //   width: 80rpx;
    // }
  }
  &-item {
    margin: 20rpx 0;
    font-size: 22rpx;
    font-weight: 800;
  }
}
</style>
